<template>
<el-container>
  <el-header>
    <el-button @click="drawer = true" type="primary" class="menu" icon="el-icon-menu">
    </el-button>
  </el-header>
  <el-container>
    <el-container>
      <el-main>
          <div id = "main">
        <div class="block">
          <el-carousel trigger="click" height="300px">
            <el-carousel-item v-for="item in imgbox" :key="item.id">
              <img :src="item.idView">
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-drawer
        :visible.sync="drawer"
        :direction="direction"
        :with-header="false">
<el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="false">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-goods"></i>
      <span slot="title">类别一</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
    <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-goods"></i>
      <span slot="title">类别二</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
  <el-menu-item index="3">
    <i class="el-icon-goods"></i>
    <span slot="title">类别三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-goods"></i>
    <span slot="title">类别四</span>
  </el-menu-item>
</el-menu>

        </el-drawer>

        <br>
        <el-row >
          <el-col :span="8" v-for="o in goods" :key="o" :offset="index > 0 ? 2 : 0" class="suolue">
            <el-card :body-style="{ padding: '5px'}" shadow="hover" >
                <img :src="o.src" class="image" @click="viewdetail(o.url)">
                <div style="padding: 14px;">
                  <!-- <p>好吃的汉堡</p> -->
                  <div class="bottom clearfix">
                    {{o.name}} ￥{{o.price}}
                  </div>
                </div>
            </el-card>
          </el-col>
        </el-row>
          </div>
      </el-main>

      <el-footer>
      </el-footer>
    </el-container>
  </el-container>
</el-container>

</template>

<script>
export default {
  data () {
    return {
      drawer: false,
      direction: 'ltr',
      goods: [
        { id: 0, name: 'g1', price: 12, src: require('../../assets/img/1.jpg'), url: 'https://www.baidu.com' },
        { id: 1, name: 'g2', price: 45, src: require('../../assets/img/2.jpg'), url: 'https://www.baidu.com' },
        { id: 2, name: 'g3', price: 3, src: require('../../assets/img/3.jpg'), url: 'https://www.baidu.com' },
        { id: 3, name: 'g4', price: 5, src: require('../../assets/img/4.jpg'), url: 'https://www.baidu.com' },
        { id: 4, name: 'g5', price: 6, src: require('../../assets/img/5.jpg'), url: 'https://www.baidu.com' }
      ],
      imgbox: [
        { id: 0, idView: require('../../assets/img/logo.png') },
        { id: 1, idView: require('../../assets/img/ys.jpg') }
      ]
    }
  },
  mounted: function () {
    this.getGoodsData()
  },
  methods: {
    // getGoodsData () {
    //   this.$http.post('login',
    //     { username: 'admin', password: '123456' }).then((res) => {
    //     this.goods = res.data
    //   })
    //   console.log(this.goods[0].id)
    // },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    viewdetail (url) {
      window.open(url, '_blank')
    }
  }
}

</script>

<style lang="less" scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    text-align:left;
  }

  .el-aside {
    background-color: #2b87f0;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    display: flex;
    text-align: center;
    line-height: 160px;
    justify-content: center;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .block {
      width: 900px;
  }
  .menu {
      margin-left: 16px;
      top:20px;
      left:0px;
  }

   .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
    min-height: 400px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 150px;
    display: block;
    border: #B3C0D1 1px solid;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

  .suolue {
      width:200px;
      height: 300px;
      margin: 10px;
  }

  #main {
      width:900px;
  }
</style>
